<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
 <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %> 
 <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %>  
 <%@ taglib uri="/WEB-INF/ticker.tld" prefix = "ticker"%>
<f:view beforePhase="#{employeeListManaged.doInitPage}">		
	<h:form>
	
<!--		<ticker:ticker id="handle" value="abccc">-->
<!--		</ticker:ticker>-->
		<div align="right">
			<h:commandButton action="addNewEmployeePage" value="Thêm Mới"></h:commandButton>
			<h:commandButton value="Thoat" onclick="window.close()" ></h:commandButton>
		</div>
		<h3>	<h:outputText value="Tìm kiếm nhân viên bằng tên. Nếu không có điều kiện thì hiển thị toàn bộ"></h:outputText></h3>
		<h:panelGrid columns="3">
		<h:outputText value="Tên"></h:outputText>
		<h:inputText value="">
			
		</h:inputText>
		<br></br>
		
		<h:outputText value="Nhóm"></h:outputText>
		
		<h:selectOneMenu value="#{employeeListManaged.groupId}">
			<f:selectItems value="#{employeeListManaged.lsGroup}"/>
		</h:selectOneMenu>
		
		<h:commandButton action="#{employeeListManaged.doFind}" value="Tìm Kiếm"></h:commandButton>
		</h:panelGrid>
		================= Start Test Ajax ====================
		<br/>
		<h:inputText value="#{employeeListManaged.numberOne}" id="idNumberA"></h:inputText>
		+
		<h:inputText value="#{employeeListManaged.numberTwo}" id="idNumberB">
			<a4j:support event="onchange" reRender="idNum"></a4j:support>
		</h:inputText>
		=
		<h:outputText value="#{employeeListManaged.sumResult}" id="idAddResult">
		
		</h:outputText>
		
		<a4j:commandButton action="#{employeeListManaged.doAdd}" value="ADD" reRender="idAddResult" id="idSum"></a4j:commandButton>
		<br></br>
		<h:outputText value="#{employeeListManaged.numberTwo}" id="idNum"> </h:outputText>
		<br/>
		==================End Test Ajax==================
	<t:saveState value="#{employeeListManaged.lsGroup}"></t:saveState>
</h:form>

<h:form id="form">
							<div id="hehe">
							</div>
		<h:selectBooleanCheckbox id="checkAll" onchange="setCheckBox(this);">Check All</h:selectBooleanCheckbox>			
		<table>
			<tr>
				<th>Chon</th>
				<th>Name</th>
				<th>Nhom</th>
				<th>Email</th>
				<th>Dien Thoai</th>
			</tr>							
				<t:dataList value="#{employeeListManaged.lsEmployeeDto}" var="item" rowIndexVar="rowIndex">
					<tr onclick='getCell("<h:outputText value="#{rowIndex}"></h:outputText>")'>
						<td>							
							<t:selectBooleanCheckbox forceId="true" id="checkbox"></t:selectBooleanCheckbox>
						</td>
						<td>
							<h:outputText  value="#{item.employee.employeeName}"></h:outputText>
						</td>
						<td>
							<h:outputText value="#{item.groupName}"></h:outputText>
						</td>
						<td>
							<h:outputText value="#{item.employee.employeeEmail}"></h:outputText>
						</td>
						<td>
							<h:outputText value="#{item.employee.employeePhoneNumber}"></h:outputText>
						</td>
					</tr>
				</t:dataList>			
		</table>
	</h:form>
	<script>
		function getCell(row) {
				var isAllCheck = true;
				document.getElementById('checkbox[' + row + ']').checked = !document.getElementById('checkbox[' + row + ']').checked;
				for(i=0; ; i++) {
					var checkBoxItem = document.getElementById('checkbox[' + i + ']');
					if (checkBoxItem != null && !checkBoxItem.checked) {
						isAllCheck = false;
						break;
					} else if (checkBoxItem == null){
						break;
					}
				}	
				document.getElementById('form:checkAll').checked = isAllCheck;	
			}
		
		function setCheckBox(checkAll) {
			if (checkAll.checked) {
				for(i=0; ; i++) {
					var checkBoxItem = document.getElementById('checkbox[' + i + ']');
					if (checkBoxItem == null) {
						break;
					} 
					checkBoxItem.checked = true;
				}
			} else {
				for(i=0; ; i++) {
					var checkBoxItem = document.getElementById('checkbox[' + i + ']');
					if (checkBoxItem == null) {
						break;
					} 
					checkBoxItem.checked = false;
				}
			}
		}
	</script>
</f:view>